<template>
    <div class="project-management">
      <!-- 顶部操作栏 -->
      <div class="top-bar">
        <el-input
          v-model="searchKey"
          placeholder="请输入项目编码、名称"
          style="width: 220px; margin-right: 10px"
          clearable
        />
        <el-checkbox v-model="showDisabled">显示禁用项目</el-checkbox>
        <el-button type="primary" @click="openAddProjectDialog">新增</el-button>
        <el-button @click="handleExport">导出</el-button>
        <el-button type="success" @click="handleEnable">启用</el-button>
        <el-button type="danger" @click="handleDisable">禁用</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
      </div>
  
      <!-- 左侧分类树 + 右侧项目列表 -->
      <div class="content">
        <!-- 左侧分类树 -->
        <div class="left-panel">
          <el-input
            v-model="categorySearch"
            placeholder="请输入分类名称"
            style="margin-bottom: 10px"
            clearable
          />
          <el-tree
            ref="projectCategoryTree"
            :data="categoryList"
            :props="categoryProps"
            :filter-node-method="filterCategory"
            default-expand-all
            @node-click="handleCategoryClick"
          >
            <template #default="{ node }">
              <span>{{ node.label }}</span>
              <!-- 分类操作按钮 -->
              <span class="category-actions">
                <el-icon @click="openAddCategoryDialog(node)"><Plus /></el-icon>
                <el-icon @click="openEditCategoryDialog(node)"><Edit /></el-icon>
                <el-icon @click="handleDeleteCategory(node)" style="color: red"><Delete /></el-icon>
              </span>
            </template>
          </el-tree>
        </div>
  
        <!-- 右侧项目列表 -->
        <div class="right-panel">
          <el-table
            :data="filteredProjects"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="openEditProjectDialog(scope.row)"
                >编辑</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="projectCode" label="项目编号" width="120" />
            <el-table-column prop="projectName" label="项目名称" />
            <el-table-column prop="client" label="客户" />
            <el-table-column prop="deliveryDate" label="交付日期" />
            <el-table-column prop="projectAmount" label="项目金额" />
            <el-table-column prop="preReceiptAmount" label="预收金额" />
            <el-table-column prop="receiptAmount" label="收款金额" />
            <el-table-column prop="balance" label="尾款" />
            <el-table-column prop="completionRate" label="完工比例" />
            <el-table-column prop="projectCategory" label="项目分类" />
            <el-table-column prop="responsiblePerson" label="负责人" />
            <el-table-column prop="businessPerson" label="业务员" />
            <el-table-column prop="responsibleDept" label="负责部门" />
            <el-table-column label="项目期限">
              <template #default="scope">
                {{ scope.row.projectTerm?.join(' ~ ') }}
              </template>
            </el-table-column>
            <el-table-column prop="projectStatus" label="项目状态" />
            <el-table-column prop="department" label="部主" />
            <el-table-column label="状态" width="100">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="handleStatusChange(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
  
      <!-- 新增项目弹窗（图2） -->
      <el-dialog title="新增项目" v-model="addProjectVisible" width="600px">
        <el-form :model="newProject" label-width="100px" :rules="projectRules" ref="projectForm">
          <el-form-item label="项目编号" prop="projectCode">
            <el-input v-model="newProject.projectCode" />
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="newProject.projectName" />
          </el-form-item>
          <el-form-item label="客户" prop="client">
            <el-input v-model="newProject.client" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="交付日期" prop="deliveryDate">
            <el-date-picker v-model="newProject.deliveryDate" type="date" />
          </el-form-item>
          <el-form-item label="项目金额" prop="projectAmount">
            <el-input v-model.number="newProject.projectAmount" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="预收金额" prop="preReceiptAmount">
            <el-input v-model.number="newProject.preReceiptAmount" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="收款金额" prop="receiptAmount">
            <el-input v-model.number="newProject.receiptAmount" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="尾款" prop="balance">
            <el-input v-model.number="newProject.balance" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="完工比例(%)" prop="completionRate">
            <el-input
              v-model.number="newProject.completionRate"
              placeholder="请输入小于等于100的数值"
            />
          </el-form-item>
          <el-form-item label="项目期限" prop="projectTerm">
            <el-date-picker
              v-model="newProject.projectTerm"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="项目状态" prop="projectStatus">
            <el-input v-model="newProject.projectStatus" />
          </el-form-item>
          <el-form-item label="项目分类" prop="projectCategory">
            <el-select v-model="newProject.projectCategory" placeholder="请选择">
              <el-option
                v-for="cat in categoryListFlat"
                :key="cat.id"
                :label="cat.label"
                :value="cat.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="负责人" prop="responsiblePerson">
            <el-input v-model="newProject.responsiblePerson" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="业务员" prop="businessPerson">
            <el-input v-model="newProject.businessPerson" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="负责部门" prop="responsibleDept">
            <el-input v-model="newProject.responsibleDept" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="newProject.remark" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addProjectVisible = false">取消</el-button>
            <el-button type="primary" @click="saveProject">保存</el-button>
            <el-button type="primary" @click="saveAndAddNew">保存并新增</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 编辑项目弹窗 -->
      <el-dialog title="编辑项目" v-model="editProjectVisible" width="600px">
        <el-form :model="editProjectForm" label-width="100px" :rules="projectRules" ref="editProjectForm">
          <el-form-item label="项目编号" prop="projectCode">
            <el-input v-model="editProjectForm.projectCode" />
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="editProjectForm.projectName" />
          </el-form-item>
          <el-form-item label="客户" prop="client">
            <el-input v-model="editProjectForm.client" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="交付日期" prop="deliveryDate">
            <el-date-picker v-model="editProjectForm.deliveryDate" type="date" />
          </el-form-item>
          <el-form-item label="项目金额" prop="projectAmount">
            <el-input v-model.number="editProjectForm.projectAmount" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="预收金额" prop="preReceiptAmount">
            <el-input v-model.number="editProjectForm.preReceiptAmount" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="收款金额" prop="receiptAmount">
            <el-input v-model.number="editProjectForm.receiptAmount" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="尾款" prop="balance">
            <el-input v-model.number="editProjectForm.balance" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="完工比例(%)" prop="completionRate">
            <el-input
              v-model.number="editProjectForm.completionRate"
              placeholder="请输入小于等于100的数值"
            />
          </el-form-item>
          <el-form-item label="项目期限" prop="projectTerm">
            <el-date-picker
              v-model="editProjectForm.projectTerm"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="项目状态" prop="projectStatus">
            <el-input v-model="editProjectForm.projectStatus" />
          </el-form-item>
          <el-form-item label="项目分类" prop="projectCategory">
            <el-select v-model="editProjectForm.projectCategory" placeholder="请选择">
              <el-option
                v-for="cat in categoryListFlat"
                :key="cat.id"
                :label="cat.label"
                :value="cat.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="负责人" prop="responsiblePerson">
            <el-input v-model="editProjectForm.responsiblePerson" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="业务员" prop="businessPerson">
            <el-input v-model="editProjectForm.businessPerson" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="负责部门" prop="responsibleDept">
            <el-input v-model="editProjectForm.responsibleDept" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="editProjectForm.remark" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editProjectVisible = false">取消</el-button>
            <el-button type="primary" @click="saveEditProject">保存</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 新增项目分类弹窗（图3） -->
      <el-dialog title="新增项目分类" v-model="addCategoryVisible" width="400px">
        <el-form :model="newCategoryForm" label-width="100px" :rules="categoryRules" ref="categoryForm">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model="newCategoryForm.categoryName" />
          </el-form-item>
          <el-form-item label="上级分类" prop="parentCategory">
            <el-select v-model="newCategoryForm.parentCategory" placeholder="请选择">
              <el-option
                v-for="cat in categoryListFlat"
                :key="cat.id"
                :label="cat.label"
                :value="cat.label"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addCategoryVisible = false">取消</el-button>
            <el-button type="primary" @click="saveCategory">保存</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 编辑项目分类弹窗 -->
      <el-dialog title="编辑项目分类" v-model="editCategoryVisible" width="400px">
        <el-form :model="editCategoryForm" label-width="100px" :rules="categoryRules" ref="editCategoryForm">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model="editCategoryForm.categoryName" />
          </el-form-item>
          <el-form-item label="上级分类" prop="parentCategory">
            <el-select v-model="editCategoryForm.parentCategory" placeholder="请选择">
              <el-option
                v-for="cat in categoryListFlat"
                :key="cat.id"
                :label="cat.label"
                :value="cat.label"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editCategoryVisible = false">取消</el-button>
            <el-button type="primary" @click="saveEditCategory">保存</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch, getCurrentInstance } from 'vue';
  import {
    ElTable,
    ElTableColumn,
    ElInput,
    ElButton,
    ElCheckbox,
    ElTree,
    ElDialog,
    ElForm,
    ElFormItem,
    ElSelect,
    ElOption,
    ElDatePicker,
    ElSwitch,
    ElIcon,
    ElMessageBox,
    ElMessage,
  } from 'element-plus';
  import { Plus, Edit, Delete } from '@element-plus/icons-vue';
  
  // 模拟初始数据
  const categoryList = ref([
    {
      id: 1,
      label: '全部',
      children: [
        { id: 2, label: '未分类' },
        { id: 3, label: '测试' },
      ],
    },
  ]);
  const projectList = ref([
    {
      projectCode: '0208H',
      projectName: '0208H',
      client: '客户6',
      deliveryDate: '',
      projectAmount: 100000.00,
      preReceiptAmount: 0.00,
      receiptAmount: 0.00,
      balance: 0.00,
      completionRate: '0%',
      projectCategory: '未分类',
      responsiblePerson: '',
      businessPerson: '采购-小陈',
      responsibleDept: '',
      projectTerm: ['2024-07-01', '2024-08-01'],
      projectStatus: '',
      department: '全部',
      status: true,
    },
    {
      projectCode: '0209',
      projectName: '0209',
      client: '',
      deliveryDate: '',
      projectAmount: 0.00,
      preReceiptAmount: 0.00,
      receiptAmount: 0.00,
      balance: 0.00,
      completionRate: '0%',
      projectCategory: '未分类',
      responsiblePerson: '',
      businessPerson: '销售-小李',
      responsibleDept: '',
      projectTerm: ['2024-07-03', '2024-08-03'],
      projectStatus: '',
      department: '全部',
      status: true,
    },
  ]);
  
  // 响应式数据
  // 响应式数据
const searchKey = ref(''); // 项目搜索关键词
const showDisabled = ref(false); // 是否显示禁用项目
const categorySearch = ref(''); // 分类搜索关键词
const selectedProjects = ref([]); // 表格选中项
const addProjectVisible = ref(false); // 新增项目弹窗
const editProjectVisible = ref(false); // 编辑项目弹窗
const addCategoryVisible = ref(false); // 新增分类弹窗
const editCategoryVisible = ref(false); // 编辑分类弹窗
const newProject = ref({}); // 新增项目表单
const editProjectForm = ref({}); // 编辑项目表单
const newCategoryForm = ref({}); // 新增分类表单
const editCategoryForm = ref({}); // 编辑分类表单
const selectedCategory = ref(null); // 当前选中分类
const { proxy } = getCurrentInstance();

// 分类树配置
const categoryProps = {
  children: 'children',
  label: 'label',
};

// 表单验证规则
const projectRules = {
  projectCode: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  client: [{ required: true, message: '请输入客户', trigger: 'blur' }],
  deliveryDate: [{ required: true, message: '请选择交付日期', trigger: 'change' }],
  projectAmount: [{ required: true, message: '请输入项目金额', trigger: 'blur' }],
  projectCategory: [{ required: true, message: '请选择项目分类', trigger: 'change' }],
  responsiblePerson: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
  businessPerson: [{ required: true, message: '请输入业务员', trigger: 'blur' }],
  responsibleDept: [{ required: true, message: '请输入负责部门', trigger: 'blur' }],
  projectTerm: [{ required: true, message: '请选择项目期限', trigger: 'change' }],
};
const categoryRules = {
  categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
  parentCategory: [{ required: true, message: '请选择上级分类', trigger: 'change' }],
};

// 扁平化分类（用于下拉选择）
const categoryListFlat = computed(() => {
  const flat = [];
  function traverse(list) {
    list.forEach((item) => {
      flat.push(item);
      if (item.children && item.children.length > 0) {
        traverse(item.children);
      }
    });
  }
  traverse(categoryList.value);
  return flat;
});

// 过滤分类（搜索功能）
const filterCategory = (value, node) => {
  return node.label.includes(value);
};

// 监听分类搜索，触发树过滤
watch(categorySearch, (val) => {
  const tree = proxy?.$refs.projectCategoryTree;
  if (tree) {
    tree.filter(val);
  }
});

// 选中分类
const handleCategoryClick = (node) => {
  selectedCategory.value = node;
};

// 打开新增项目弹窗
const openAddProjectDialog = () => {
  newProject.value = {
    projectCategory: '未分类', // 默认分类
    status: true, // 默认启用
    completionRate: 0, // 默认完工比
  };
  addProjectVisible.value = true;
};

// 保存项目
const saveProject = () => {
  proxy.$refs.projectForm.validate((valid) => {
    if (valid) {
      // 计算尾款
      newProject.value.balance = newProject.value.projectAmount - newProject.value.receiptAmount;
      
      projectList.value.push({ ...newProject.value });
      addProjectVisible.value = false;
      ElMessage.success('项目保存成功！');
    } else {
      ElMessage.error('请完善表单信息！');
    }
  });
};

// 保存并新增
const saveAndAddNew = () => {
  saveProject();
  newProject.value = {
    projectCategory: '未分类',
    status: true,
    completionRate: 0,
  };
  addProjectVisible.value = true;
};

// 打开编辑项目弹窗
const openEditProjectDialog = (row) => {
  editProjectForm.value = { ...row };
  editProjectVisible.value = true;
};

// 保存编辑项目
const saveEditProject = () => {
  proxy.$refs.editProjectForm.validate((valid) => {
    if (valid) {
      // 计算尾款
      editProjectForm.value.balance = 
        editProjectForm.value.projectAmount - editProjectForm.value.receiptAmount;
      
      const index = projectList.value.findIndex(
        (item) => item.projectCode === editProjectForm.value.projectCode
      );
      if (index !== -1) {
        projectList.value[index] = { ...editProjectForm.value };
      }
      editProjectVisible.value = false;
      ElMessage.success('项目编辑成功！');
    } else {
      ElMessage.error('请完善表单信息！');
    }
  });
};

// 打开新增分类弹窗
const openAddCategoryDialog = (parentNode) => {
  newCategoryForm.value = {
    parentCategory: parentNode ? parentNode.label : '全部',
  };
  addCategoryVisible.value = true;
};

// 保存分类
const saveCategory = () => {
  proxy.$refs.categoryForm.validate((valid) => {
    if (valid) {
      const parentNode = categoryList.value.find(
        (item) => item.label === newCategoryForm.value.parentCategory
      );
      if (parentNode) {
        const newCat = {
          id: Date.now(),
          label: newCategoryForm.value.categoryName,
          children: [],
        };
        if (parentNode.children) {
          parentNode.children.push(newCat);
        } else {
          parentNode.children = [newCat];
        }
      }
      addCategoryVisible.value = false;
      ElMessage.success('分类保存成功！');
    } else {
      ElMessage.error('请完善表单信息！');
    }
  });
};

// 打开编辑分类弹窗
const openEditCategoryDialog = (node) => {
  editCategoryForm.value = {
    id: node.id,
    categoryName: node.label,
    parentCategory: node.parent ? node.parent.label : '全部',
  };
  editCategoryVisible.value = true;
};

// 保存编辑分类
const saveEditCategory = () => {
  proxy.$refs.editCategoryForm.validate((valid) => {
    if (valid) {
      const targetNode = findCategoryNode(categoryList.value, editCategoryForm.value.id);
      const parentNode = categoryList.value.find(
        (item) => item.label === editCategoryForm.value.parentCategory
      );
      
      if (targetNode && parentNode) {
        // 更新分类名称
        targetNode.label = editCategoryForm.value.categoryName;
        
        // 调整分类层级
        if (targetNode.parent && targetNode.parent !== parentNode) {
          // 从原父节点移除
          const index = targetNode.parent.children.findIndex(
            (item) => item.id === targetNode.id
          );
          if (index !== -1) {
            targetNode.parent.children.splice(index, 1);
          }
          
          // 添加到新父节点
          if (!parentNode.children) {
            parentNode.children = [];
          }
          parentNode.children.push(targetNode);
        }
      }
      
      editCategoryVisible.value = false;
      ElMessage.success('分类更新成功！');
    } else {
      ElMessage.error('请完善表单信息！');
    }
  });
};

// 查找分类节点
const findCategoryNode = (list, id) => {
  for (const item of list) {
    if (item.id === id) {
      return item;
    }
    if (item.children && item.children.length > 0) {
      const found = findCategoryNode(item.children, id);
      if (found) {
        return found;
      }
    }
  }
  return null;
};

// 删除分类
const handleDeleteCategory = (node) => {
  if (node.id === 1) {
    ElMessage.warning('"全部"分类不能删除！');
    return;
  }
  
  // 检查是否有子分类
  if (node.children && node.children.length > 0) {
    ElMessage.warning('请先删除该分类下的所有子分类！');
    return;
  }
  
  // 检查是否有项目使用该分类
  const hasProjects = projectList.value.some(
    (project) => project.projectCategory === node.label
  );
  
  if (hasProjects) {
    ElMessage.warning('该分类下有项目，不能删除！');
    return;
  }
  
  ElMessageBox.confirm(
    `确定要删除分类"${node.label}"吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const parent = node.parent;
    if (parent && parent.children) {
      const index = parent.children.findIndex((item) => item.id === node.id);
      if (index !== -1) {
        parent.children.splice(index, 1);
      }
    }
    ElMessage.success('分类删除成功！');
  }).catch(() => {
    // 取消操作
  });
};

// 启用选中的项目
const handleEnable = () => {
  if (selectedProjects.value.length === 0) {
    ElMessage.warning('请先选择要启用的项目！');
    return;
  }
  
  selectedProjects.value.forEach((project) => {
    project.status = true;
  });
  
  selectedProjects.value = [];
  ElMessage.success('项目启用成功！');
};

// 禁用选中的项目
const handleDisable = () => {
  if (selectedProjects.value.length === 0) {
    ElMessage.warning('请先选择要禁用的项目！');
    return;
  }
  
  selectedProjects.value.forEach((project) => {
    project.status = false;
  });
  
  selectedProjects.value = [];
  ElMessage.success('项目禁用成功！');
};

// 删除选中的项目
const handleDelete = () => {
  if (selectedProjects.value.length === 0) {
    ElMessage.warning('请先选择要删除的项目！');
    return;
  }
  
  ElMessageBox.confirm(
    `确定要删除选中的${selectedProjects.value.length}个项目吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const codes = selectedProjects.value.map((project) => project.projectCode);
    projectList.value = projectList.value.filter((project) => !codes.includes(project.projectCode));
    selectedProjects.value = [];
    ElMessage.success('项目删除成功！');
  }).catch(() => {
    // 取消操作
  });
};

// 导出项目数据
const handleExport = () => {
  ElMessage.info('导出功能开发中...');
};

// 表格选择变化
const handleSelectionChange = (rows) => {
  selectedProjects.value = rows;
};

// 项目状态变更
const handleStatusChange = (row) => {
  ElMessage.info(`【${row.projectName}】状态变更为：${row.status ? '启用' : '禁用'}`);
};

// 计算过滤后的项目列表
const filteredProjects = computed(() => {
  if (!searchKey.value && !selectedCategory.value) {
    return showDisabled.value
      ? projectList.value
      : projectList.value.filter((project) => project.status === true);
  }
  
  let result = projectList.value;
  
  // 按搜索关键词过滤
  if (searchKey.value) {
    const keyword = searchKey.value.toLowerCase();
    result = result.filter(
      (project) =>
        project.projectCode.toLowerCase().includes(keyword) ||
        project.projectName.toLowerCase().includes(keyword) ||
        project.client.toLowerCase().includes(keyword)
    );
  }
  
  // 按分类过滤
  if (selectedCategory.value && selectedCategory.value.label !== '全部') {
    result = result.filter((project) => project.projectCategory === selectedCategory.value.label);
  }
  
  // 按状态过滤
  if (!showDisabled.value) {
    result = result.filter((project) => project.status === true);
  }
  
  return result;
});
</script>

<style scoped>
/* 基本布局样式 */
.project-management {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.left-panel {
  width: 250px;
  border-right: 1px solid #e4e7ed;
  padding: 10px;
  overflow-y: auto;
}

.right-panel {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

/* 分类树样式 */
.category-actions {
  margin-left: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.el-tree-node:hover .category-actions {
  opacity: 1;
}

/* 弹窗样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 表格样式优化 */
.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>